<!--
* description: 维修工单-工时选择
* author:wzm
* createdDate:2020-1-25
-->

<template>
  <section class="editAreaAudit">
    <el-dialog
      v-dialogDrag
      :visible.sync="curPopupsVisible"
      width="75%"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="closeEditTime"
      @open="open"
    >
      <dialogHeader
        slot="title"
        :title="titleName"
        :style-type="$store.state.app.dialogType"
      />

      <div class="app-container app-container-table">
        <one-table-template
          ref="multipleTable"
          :dynamic-buttons="tableButtons"
          :dynamic-components="tableComponents"
          :dynamic-api-config="apiConfig"
          :dynamic-table-cols="tableCols"
          :dynamic-form-fields="formField"
          :dynamic-is-show-select="true"
          :dynamic-is-init-table="true"
          :dynamic-is-fix-choose="false"
          :dynamic-is-fix-index="false"
          :dynamic-is-show-more-btn="true"
          :dynamic-api-style="'restful'"
          :dynamic-table-defult-height="300"
          :is-show-pagination="true"
          :callback-obj="callbackObj"
        />
      </div>
    </el-dialog>
  </section>
</template>

<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import { formMixins } from '@/components/mixins/formMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import { vehiclePdiPriceInquirys } from '@/api/se/vehiclePdiPriceInquiry'
export default {
  components: {
    OneTableTemplate,
    dialogHeader: () => import('@/components/dialogHeader')
  },

  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins, formMixins],
  props: {
    customObj: { type: Object, default: () => { return {} } },
    popupsVisible: { type: Boolean, default: false },
    dynamicEditRowData: { type: Object, default: () => ({}) },
    // 已经选择过的数据
    chosenList: { type: Array, default: () => ([]) }
  },

  data() {
    const viewPageCode = 'areaAudit-edit'
    return {
      refundData: [],
      titleName: '工时选择',
      apiConfig: vehiclePdiPriceInquirys.workHoursSelectionT,

      callbackObj: {
        onCheckSelectChange: (selection) => {
          this.refundData = selection
          this.handleSelectionChange(selection)
        }
      },

      // 动态组件-按钮
      tableButtons: [
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          clickEvent: () => this.queryTable(1),
          text: this.$t('sys.button.query'), // 查询
          position: 'right',
          fuzzySearch: true
        },
        {
          compKey: 'btnKey2',
          size: 'small',
          clickEvent: () => this.reset(),
          text: this.$t('sys.button.reset'),
          position: 'right' // 重置
        },
        {
          compKey: 'btnKey3',
          size: 'small',
          clickEvent: () => this.select(),
          text: '选择',
          disabled: true,
          position: 'right' // 选择
        }
      ],

      // 动态组件-查询条件
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
            {
              prop: 'wiCode',
              label: '工时编码',
              align: 'center'
            },
            {
              prop: 'repairContent',
              label: '维修内容',
              align: 'center'
            },
            {
              prop: 'carTypeCn',
              label: '车型',
              align: 'center'
            },
            {
              prop: 'saleWiQty',
              label: '标准工时',
              align: 'center'
            },
            {
              prop: 'repariType',
              label: '工时大类',
              align: 'center'
            },
            {
              prop: 'rrpairSmallKindCode',
              label: '工时小类',
              align: 'center'
            }
          ],

      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents
          : [
            {
              compKey: 'compKey1',
              labelName: '工时编码：',
              codeField: 'wiCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              span: 8,
              isMust: true
            },
            {
              compKey: 'compKey2',
              labelName: '车型：',
              codeField: 'carTypeCn',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              disabled: true,
              span: 8,
              isMust: true
            },
            {
              compKey: 'compKey3',
              labelName: '维修内容：',
              codeField: 'repairContent',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              span: 8,
              isMust: true
            },
            {
              compKey: 'compKey4',
              labelName: '工时大类：',
              codeField: 'operatePartCode',
              textField: 'opratePartName',
              oFields: 'operatePartCode,opratePartName',
              component: () => import('@/components/org/commonSelect'),
              customObj: {
                api: vehiclePdiPriceInquirys.findOpratePlace,
                selectType: '1'
              },
              type: 'dropdownList',
              isMust: true,
              span: 8
            },
            {
              compKey: 'compKey5',
              labelName: '工时小类：',
              codeField: 'rrpairSmallKindCode',
              textField: 'rrpairSmallKindName',
              oFields: 'rrpairSmallKindCode,rrpairSmallKindName',
              component: () => import('@/components/org/commonSelect'),
              options: [],
              parentFileds: 'value:operatePartCode-operatePartCode',
              type: 'dropdownList',
              isMust: true,
              disabled: true,
              span: 8
            }
          ],

      // 表单数据（无需赋值，由混入对象赋值）
      formField: this.$utils.getFormField(
        this,
        {
          operatePartCode: '',
          opratePlaceName: '',
          wiCode: '',
          carTypeCode: '',
          carTypeCn: '',
          repairContent: '',
          repariType: '',
          rrpairSmallKindCode: '',
          rrpairSmallKindName: ''
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      )
    }
  },
  watch: {
    'formField.operatePartCode'(val) {
      const comp = this.tableComponents.find(o => o.codeField === 'rrpairSmallKindCode')
      comp.disabled = !val
      if (val) {
        this.$requestAPI({
          apiUrl: vehiclePdiPriceInquirys.findSmallOpratePlace.APIUrl,
          variables: {
            operatePartCode: val
          }
        }).then(res => {
          if (res.result === '1') {
            comp.options = res.rows
          } else {
            this.$message(res.msg ? res.msg : '')
          }
        }).catch(err => {
          if (err.response.data.msg) {
            this.$message(err.response.data.msg)
          } else {
            this.$message(err.message)
          }
        })
      }
      this.formField.rrpairSmallKindCode = ''
      this.formField.rrpairSmallKindName = ''
    }
  },

  methods: {
    // 禁用上个弹窗已选择 数据
    getSelectable(row, index, ref) {
      return !this.chosenList.includes(row['wiCode'])
    },

    reset() {
      this.formField.wiCode = ''
      this.formField.repairContent = ''
      this.formField.operatePartCode = ''
      this.formField.rrpairSmallKindCode = ''
    },
    open() {
      this.$nextTick(() => {
        this.queryTable(1)
      })
      this.formField.carTypeCn = this.dynamicEditRowData.carConfigCn
      this.formField.carTypeCode = this.dynamicEditRowData.carConfigCode
    },
    // 关闭弹窗
    closeEditTime() {
      this.$emit('close', false)
      this.clearData()
    },
    select() {
      this.refundData.forEach(element => {
        if (!element.repairModeId) {
          element.repairModeId = ''
        }
        element.wiName = element.repairContent
        element.saleWorkQty = element.saleWiQty
        element.wiAmount = ''
        element.groupName = ''
        element.repairTechnician = ''
        element.workshopEmpId = ''
        element.wiPreAmount = ''
        element.isEntrust = ''
        element.isEntrustCode = ''
        element.note = ''
        element.retRepairTypeName = ''
        element.retRepairType = ''
        element.comboSaleCode = ''
        element.repairGroup = ''
        element.repairGroupId = ''
      })
      this.$emit('refund-data', this.refundData)
      this.closeEditTime()
    },

    // 当选择项发生变化时会触发该事件
    handleSelectionChange(selection) {
      const btns = this.tableButtons.filter(o => o.disabled !== undefined)
      if (btns.length > 0) {
        const isCheck = selection && selection.length > 0
        btns.forEach((item) => {
          item.disabled = !isCheck
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
>>> div.fixHeight {
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
}
h3 {
  padding-left: 1%;
  text-align: left;
  font-weight: 600;
  transition: 1s;
  transition-timing-function: cubic-bezier(0.66, 0.3, 0.08, 1.41);
  opacity: 1;
  text-shadow: #c0c4cc 3px 3px 2px;
  /*transform-style: preserve-3d;*/
  /*transform: perspective(900px) translateZ(0) translateX(0);*/
}

h3 button.el-button {
  float: right;
  margin-right: 10px;
}
>>> .el-table .warm-row {
  background: #eedbae;
}
.filter-container.filter-title::before {
  border-left: 4px solid #0075ff;
  padding-right: 10px;
  height: 20px;
  left: 0px;
  top: 4px;
}
.fixHeight::v-deep .el-checkbox {
  width: 100%;
}
.styleButon {
  height: 24px;
}
.fixHeight::v-deep #searchFormGroup .el-row .el-col .el-col label {
  max-width: 120px !important;
}
</style>
